<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:layOut="http://www.w3.org/1999/xhtml"
	  layOut:decorator="layOut/layOut">
<head>
	<title>用户管理</title>
</head>
<body class="pear-container">
	<div class="layui-card">
		<div class="layui-card-body">
			<form class="layui-form">
				<div class="layui-form-item">
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label" for="name">用户名</label>
						<div class="layui-input-inline">
							<input type="text" name="name" id="name" placeholder="请输入" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item layui-inline">
						<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="theSearchFilter">
							<i class="layui-icon layui-icon-search"></i>查询
						</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	<div class="layui-card">
		<div class="layui-card-body">
			<table id="theTable" lay-filter="tableFilter"></table>
		</div>
	</div>
	<script type="text/javascript" th:inline="javascript">
		const type = [[${type}]];
	</script>
	<script type="text/html" id="topToolbar">
		<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="addEvent">
			<i class="layui-icon layui-icon-add-1"></i>新增
		</button>
		<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemoveEvent">
			<i class="layui-icon layui-icon-delete"></i>删除
		</button>
	</script>
	<script type="text/html" id="innerToolbar">
		<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="editEvent">
			<i class="layui-icon layui-icon-edit"></i>
		</button>
		<button class="pear-btn pear-btn-warming pear-btn-sm" lay-event="configEvent">
			<i class="layui-icon layui-icon-vercode"></i>
		</button>
	</script>
	<script type="text/javascript">
		layui.use(['table', 'form', 'jquery','common'], function() {
			let table = layui.table;
			let form = layui.form;
			let $ = layui.jquery;
			let common = layui.common;

			table.render({
				elem: '#theTable',
				url: '/user/list/' + type,
				method: 'post',
				page: true,
				skin: 'line',
				toolbar: '#topToolbar',
				defaultToolbar: [{
					title: '刷新',
					layEvent: 'refreshEvent',
					icon: 'layui-icon-refresh',
				}, 'filter', 'print', 'exports'],
				cols: [ [
					{type: 'checkbox'},
					{field: 'serialNumber', align: 'center', title: '序号', type: 'numbers'},
					{field: 'name', align: 'center', title: '姓名', templet: function (data) {
							var name = data.name;
							return "<a style='color:#01AAED;cursor: pointer' lay-event='detailEvent'>" + name + "</a>";
						}},
					{field: 'account', align: 'center', title: '账户'},
					{field: 'sex', align: 'center', title: '性别'},
					{field: 'age', align: 'center', title: '年龄'},
					{field: 'orgName', align: 'center', title: '组织'},
					{field: 'updated', align: 'center', title: '更新时间'},
					{title: '操作', toolbar: '#innerToolbar', align: 'center', width: 130}
				] ]
			});
			//表格中工具栏
			table.on('tool(tableFilter)', function(obj) {
				if (obj.event === 'editEvent') {
					layer.open({
						type: 2,
						title: '修改',
						shade: 0.1,
						area: ['500px', '400px'],
						content: '/user/edit/'+obj.data.id
					});
				} else if (obj.event === 'configEvent') {
					layer.open({
						type: 2,
						title: '配置',
						shade: 0.1,
						area: ['500px', '400px'],
						content: '/user/config/'+obj.data.id
					});
				}
			});
			//表格顶部工具栏
			table.on('toolbar(tableFilter)', function(obj) {
				if (obj.event === 'addEvent') {
					layer.open({
						type: 2,
						title: '新增',
						shade: 0.1,
						area: [common.isModile()?'100%':'500px', common.isModile()?'100%':'400px'],
						content: '/user/add'
					});
				} else if (obj.event === 'refreshEvent') {
					table.reload('theTable');
				} else if (obj.event === 'batchRemoveEvent') {
					window.batchRemove(obj);
				}
			});
			//搜索
			form.on('submit(theSearchFilter)', function(data) {
				table.reload('theTable', {
					where: data.field
				})
				return false;
			});
			//批量删除
			window.batchRemove = function(obj) {
				var checkIds = common.checkField(obj,'userId');
				if (checkIds === "") {
					layer.msg("未选中数据", {
						icon: 3,
						time: 1000
					});
					return false;
				}
				layer.confirm('确定要删除这些用户', {
					icon: 3,
					title: '提示'
				}, function(index) {
					layer.close(index);
					let loading = layer.load();
					$.ajax({
						url: "batchRemove/" + ids,
						dataType: 'json',
						type: 'delete',
						success: function(result) {
							layer.close(loading);
							if (result.success) {
								layer.msg(result.msg, {
									icon: 1,
									time: 1000
								}, function() {
									table.reload('theTable');
								});
							} else {
								layer.msg(result.msg, {
									icon: 2,
									time: 1000
								});
							}
						}
					})
				});
			}
		})
	</script>
</body>
</html>